<template>
  <div class="section-home-wrapper">
    <vue-scroll>
      <div class="section-home">
        <!--首页文章-->
        <div class="article-container">
          <template v-if="homeArticleListPagination.page===1">
            <milk-article v-for="article in topArticleList"
                          :value="article"
                          :key="article._id"
                          :top="true"
            ></milk-article>
          </template>

          <milk-article v-for="article in articleList" :value="article" :key="article._id"></milk-article>

          <paginate
              v-model="homeArticleListPagination.page"
              :page-count="pagesComputed"
              prev-text='<i class="fa fa-chevron-left" aria-hidden="true"></i>'
              next-text='<i class="fa fa-chevron-right" aria-hidden="true"></i>'
              :click-handler="handlePageChange"
              :container-class="'ml-pagination'"
              :page-class="'ml-page-item'"
          >
          </paginate>
        </div>
        <!--首页的小栏目-->
        <plugs></plugs>
      </div>
    </vue-scroll>
  </div>
</template>

<script>
import { GetArticle, GetArticleCount, GetTopArticle } from '../../api/blog-api'
import Plugs from '../public-view/plugs/Plugs'

const PUBLISHED = 1
export default {
  name: 'Home',
  components: { Plugs },
  computed: {
    pagesComputed () {
      let pages = 1
      if (this.articleTotal) {
        pages = Math.ceil(this.articleTotal / this.homeArticleListPagination.limit)
      }
      // console.log(pages)
      return pages
    }
  },
  data () {
    return {
      articleTotal: '',
      homeArticleListPagination: {
        page: 1,
        limit: 8
      },
      articleList: [],
      topArticleList: []
    }
  },
  created () {
    this.getTopArticle()
    this.getTotalArticle()
    this.getArticleList(this.homeArticleListPagination)
  },
  methods: {
    getTotalArticle () {
      GetArticleCount({ published: PUBLISHED, top: 0 }).then(res => {
        this.articleTotal = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    getTopArticle () {
      GetTopArticle().then(res => {
        this.topArticleList = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    getArticleList (query) {
      GetArticle({ ...query, top: 0 }).then(res => {
        this.articleList = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    handlePageChange (data) {
      console.log(data)
      this.getArticleList(this.homeArticleListPagination)
    },
  }
}
</script>

<style>
/*Home.vue*/
.section-home-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f3f6fb;
  overflow: auto;
}

.section-home {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}

.article-container {
  min-height: 100%;
  width: 100%;
  /*border-right: 1px solid #e6e6e6;*/
  padding: 48px 38px;
}

/*1200px 以上 plug-container 在右边*/
@media (min-width: 1200px) {
  .section-home {
    display: flex;
  }
}

@media (max-width: 992px) {
  .section-home {
    transition: .3s;
  }

}

/*1000px 以上的样式*/
@media (min-width: 992px) {
  .section-home {
    max-width: 1280px;
  }
}

</style>
